<!--保险投保  -->
<template>
	<border cardTitle="体重体脂">
		<div class="table">
			<div class="tableBar">
				<div class="item"></div>
				<div class="item">地区</div>
				<div class="item">肥胖数(人)</div>
				<div class="item">肥胖率(%)</div>
			</div>
			<div class="tableContent flex-1">
				<div class="list" v-for="(item, index) in list" :key="index"
					:style="{ background: index % 2 == 0 ? '' : '#08183d' }">
					<div class="item">{{ index + 1 }}</div>
					<div class="item">{{ item.name }}</div>
					<div class="item">{{ item.num }}</div>
					<div class="item">{{ item.rate }}</div>
				</div>
			</div>
		</div>
	</border>
</template>

<script>
	import border from '../border.vue';
	import StatisticsMixins from '../../StatisticsMixins';
	let color = ['#2467ED', '#16E4CF', '#EBA62C'];
	import {
		bigScreenApi
	} from '@/api/index';
	import {
		getRandom
	} from '@/utils/base.js'
	export default {
		components: {
			border
		},
		mixins: [StatisticsMixins],
		data() {
			return {
				province: ['莲都', '缙云', '龙泉', '青田', '遂昌', '松阳', '云和', '景宁', '庆元'],
				list: []
			};
		},
		props: {
			level: {
				type: [String, Number],
				default: 0
			},
			areaList: {
				type: [Array],
				default: () => []
			},
			cityId: {
				type: [String, Number],
				default: ''
			}
		},
		watch: {
			level: {
				handler(newV, oldV) {
					this.getInfo();
				},
				immediate: true
			}
		},
		methods: {
			getInfo() {
				this.list = [];
				let cowData = [];
				this.province.forEach(item => {
					cowData.push({
						name: item,
						num: getRandom(10, 100),
						rate: getRandom(2, 10, 'floor'),
					})
				})
				cowData = cowData.sort((a, b) => {
					return b.rate - a.rate
				})
				this.list = cowData.slice(0, 3)
				// this.$postAction(bigScreenApi.insureCount, {
				// 	xzqhbm: this.level > 1 ? this.cityId : '',
				// 	level: this.level
				// }).then(res => {
				// 	if (res && res.code == 1) {

				// 		console.log(this.list);
				// 	}
				// });
			}
		}
	};
</script>

<style scoped lang="less">
	.table {
		padding-top: 0.2rem !important;
		padding-bottom: 0 !important;
		//   width: 100%;
		height: 100%;
		padding: 26px 17px;
		//   background: red;
		display: flex;
		flex-direction: column;

		.tableBar {
			width: 100%;
			height: 0.37rem;
			display: flex;
			background: #12275a;

			.item {
				width: 30%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				// font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #2467ed;

				&:first-child {
					width: 10%;
				}

				&:last-child {
					color: #e94256;
				}
			}
		}

		.tableContent {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.list {
				width: 100%;
				height: 33%;
				display: flex;

				.item {
					width: 30%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
					// font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;

					&:first-child {
						width: 10%;
					}
				}
			}
		}
	}
</style>